<template>
  <li class="newsItem" @click="jump('news')">
    <el-row :gutter="20">
      <el-col :span="5" class="image">
        <div>
          <el-image
            class="border--radius"
            style="border-radius:4px;width: 100%; height:100%"
            :src="`${images}/${item.imgUrl}`"
            fit="cover"
          ></el-image>
        </div>
      </el-col>
      <el-col :span="19" class="text">
        <div>
          <el-row>
            <div class="title">
              <el-button type="text">
                {{ item.title }}
              </el-button>
            </div>
          </el-row>
          <el-row>
            <div class="introduce">
              {{ item.content }}
            </div>
          </el-row>
          <el-row class="others">
            <el-col :span="6">
              作者：
              <el-button type="text" @click.stop="jump('author')">
                {{ item.author.name }}
              </el-button>
            </el-col>
            <el-col :span="3">浏览数：{{ item.browse }}</el-col>
            <el-col :span="3">评论数：{{ item.comments }}</el-col>
            <el-col :span="4" class="class">
              板块：
              <el-button type="text" @click.stop="jump('class')"
                >{{ classification.name }}
              </el-button>
              &nbsp;-&nbsp;
              <el-button type="text" @click.stop="jump('map')"
                >{{ map.name }}
              </el-button>
            </el-col>
            <el-col :span="8">发布时间：{{ item.time }}</el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </li>
</template>

<script>
import { IMAGES } from '@/assets/js/settings'
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          title: '',
          id: '',
          content: '',
          classId: '',
          mapId: '',
          imageUrl: '',
          time: '',
          author: { id: '', name: '' },
          browse: 0,
          comments: 0
        }
      }
    }
  },
  computed: {
    classification() {
      return this.$store.getters['classification/aclass'](this.item.classId)
    },
    map() {
      return this.$store.getters['classification/amap'](
        this.item.classId,
        this.item.mapId
      )
    },
    images() {
      return IMAGES
    }
  },
  methods: {
    jump(name) {
      let url
      switch (name) {
        case 'news':
          url = `/news/${this.item.id}`
          break
        case 'class':
          url = `/class/${this.classification.id}/0`
          break
        case 'map':
          url = `/class/${this.classification.id}/${this.map.id}`
          break
        case 'author':
          url = `/author/${this.item.author.id}/dynamic`
          break
        default:
          break
      }
      this.$router.push(url)
    }
  }
}
</script>

<style lang="scss" scoped>
.newsItem {
  height: 168px;
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  background-color: #fff;
  cursor: pointer;
  & > .el-row {
    height: 100%;
  }
  &:hover {
    background-color: #f8f8f8;
  }
}
.el-col {
  height: 100%;
}
.image div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-image {
    display: block;
    height: 100%;
    width: 100%;
  }
}
.title .el-button {
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  @include font(20px);
}
.introduce {
  margin: 10px 0;
  height: 66px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
.others {
  height: 20px;
  .el-col {
    height: 100%;
    font-size: 14px;
    color: #999;
    @include flexCenter($jc: flex-start);
  }
}
.el-button {
  margin: 0;
  padding: 0;
}
.el-button--text {
  color: #999;
  &:hover {
    color: $--color-primary;
  }
}
</style>
